<template>
  <div class="flex h-[100%] gap-2">
    <a-card :body-style="{ padding: '0px 8px' }">
      <a-menu @select="selectMenu" v-model:selected-keys="selectedKeys" :items="menus"></a-menu>
    </a-card>
    <a-card class="flex-1" bordered :body-style="{ padding: '12px' }">
      <ul ref="cardRef">
        <li
          :data-selection="item.fileId"
          v-for="(item, key) in filesTable.data"
          :key="key"
          :draggable="true"
          class="system__hover"
          @contextmenu="displayFilesMenu(item)"
          @dragover="(e: Event) => e.preventDefault()"
          @click="selectItem(item)"
          @dblclick="filesEdit(item.fileId)"
          :class="{ active: filesTable.keys.includes(item.fileId) }"
        >
          <a-card :bordered="false" :body-style="{ padding: '0' }">
            <div class="flex flex-s h-[64px]">
              <FileRender type="file" :src="item.filePath" :filename="item.fileName"></FileRender>
            </div>
            <a-tooltip :title="item.fileName" placement="bottom">
              <div class="file-name">
                {{ item.fileName }}
              </div>
            </a-tooltip>
          </a-card>
        </li>
      </ul>
      <a-divider v-if="filesTable.data.length > 0">
        <span class="text-[12px] text-gray-400">没有更多了</span>
      </a-divider>
      <a-empty v-else></a-empty>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import type { AxFiles } from '@/api/modules/ax/files/types';
import FileRender from '@/views/components/file-render/FileRender.vue';
import { selectionKeys } from '@/views/selector/selection/data';
import { useSortable } from '@vueuse/integrations/useSortable';
import type { MenuInfo, MenuItemType } from 'ant-design-vue/es/menu/src/interface';
import { displayFilesMenu, filesEdit, filesSearch } from '../../data/curd';
import { fileTypeOptions } from '../../data/options';
import { filesTable } from '../../data/table';
import { filesForm } from '../../data/form';

interface SortConfig {
  oldIndex: number;
  newIndex: number;
}

const selectedKeys = ref();
const cardRef = ref();
const menus = ref<MenuItemType[]>();

const selectItem = (item: AxFiles) => {
  filesTable.value.keys = [item.fileId];
  filesForm.value = item;
};

const selectMenu = (info: MenuInfo) => {
  filesTable.value.query.fileType = `${info.key}`;
  filesSearch();
};

onMounted(async () => {
  nextTick(() => {
    useSortable(cardRef, filesTable.value.data, {
      animation: 200,
      onUpdate(e: SortConfig) {
        // 拖拽结束触发
      },
    });
  });
});

const watchProps = {
  deep: true,
  immediate: true,
};

watch(
  selectionKeys,
  () => {
    filesTable.value.keys = Array.from(selectionKeys.value).map(e => Number(e));
  },
  watchProps,
);

watch(
  fileTypeOptions,
  () => {
    menus.value = fileTypeOptions.value?.map((e: any) => {
      return {
        title: e.label,
        key: e.value,
        label: e.label,
      };
    });
  },
  watchProps,
);

watch(
  () => filesTable.value.query.fileType,
  () => {
    selectedKeys.value = [filesTable.value.query.fileType];
  },
  watchProps,
);
</script>

<style lang="scss" scoped>
.ax_plain_card {
  background: #ffffffbb;
}
ul {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  li {
    padding: 4px;
    display: flex;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: var(--cursor-pointer);
    height: 96px;
    :deep(.ant-card) {
      background-color: transparent;
      box-shadow: none;
    }
    .file-name {
      overflow: hidden;
      white-space: nowrap;
      width: 84px;
      text-overflow: ellipsis;
      text-align: center;
    }
  }
}
.active {
  background: var(--active-bg);
}
:deep(.ant-menu) {
  border-right: none !important;
}
</style>
